// fix color vars that we can't override
html {
    background-color: $scheme-background;
}

body {
    position: relative;
}

body.body--dark {
    color: $scheme-text;
}

a {
    color: $scheme-link;
    &:hover, &:focus {
        color: $scheme-link-hover;
    }

    &.disabled, &[disabled] {
        color: $scheme-link;
        opacity: 0.4 !important;
    }
}

.button[disabled], fieldset[disabled] .button {
    color: $button-disabled-color;
}

select {
    color: $select-color;
    background-color: $select-background-color;
    border-color: $select-border-color;
    &:not(.disabled):not([disabled]) {
        &:hover, &:focus {
            border-color: $select-hover-border-color;
        }
    }
}

.menu-list a.is-active {
    color: $menu-item-active-color;
}

.pagination-link.is-current {
    background-color: $pagination-current-background-color;
    border-color: $pagination-current-border-color !important;
    color: $pagination-current-color !important;
}

.icon--margin-right {
    margin-right: 0.5em;
}

// custom
.menu {
    display: block;
    padding: 1em 0 1em 1em;
    position: sticky;
    top: 0;

    .tagged-link {

        display: flex;
        flex: 1;
        align-items: center;

        &__icon {
            flex: 0;
        }

        &__content {
            flex: 1;
        }

        &__tag {
            flex: 0;
        }
    }
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1em;
    box-shadow: 1px 1px 3px 0 $scheme-shadow;

    &--opaque {
        background-color: $scheme-background;
    }

    &--no-shadow {
        box-shadow: 0 0;
    }

    &--no-padding {
        padding: 0;
    }
}
.sticky-top--buttons {
    z-index: 101;
    float: right;
    padding: 0.7em;
    box-shadow: 0 0 0 0 transparent;
}
.sticky-top--search {
    background-color: inherit;
    padding: 0;
    margin: 0;
    z-index: 10;
    box-shadow: unset;
}

.background-bg {
    background-color: $scheme-background;
}

.border-at-bottom {
    border-bottom: 1px solid $scheme-border;
}

.image-parent {
    position: relative;
}
.image-overlap {
    position: absolute;
    top: 0;
    left: 0;
}

.row-card {
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.2s, box-shadow 0.2s linear;
    border-bottom: 1px solid $scheme-border;
    margin: 0 0 4px;

    &--expanded {
        border-bottom-width: 0;
        background-color: $card-expand-background-color;
    }
}

.card {
    border: 0 !important;
}

.disabled-card {
    .mod-logo, .card-title, .card-content {
        opacity: 0.6;
    }
}

.card-footer-borderless, .card-footer-borderless .card-footer-item {
    border: none !important;
    // these two lines allow the hover effect's pseudo-element to position itself behind the element's text, with a bit of a margin
    position: relative;
    z-index: 1;
}

.card-footer-item:not(.non-selectable) {

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        z-index: -1;
        background-color: transparent;
        border: 1px solid $scheme-border-secondary;
        border-radius: 4px;
    }

    &:hover, &:active, &:focus {
        color: #ffffff;
        &::before {
            background-color: $scheme-primary;
            border: 0;
        }
    }
}

.card-byline, .card-timestamp {
    color:$scheme-text-secondary;
}

.card-timestamp {
    font-size: 0.9em;
}

.card-timestamp strong {
    color: inherit;
}

.is-text {
    color: inherit;
    &--bold {
        font-weight: 500;
    }
}

.scrollable {
    position: relative;
    max-height: 100%;
}

.select--content-spacing {
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.select--full {
    min-width: auto;
    width: 100%;
}

.card {
    border-radius: 4px;
}

.is-square {
    border-radius: 0;
}

.subtitle {
    background-color: inherit;

    &--is-background {
        background-color: $scheme-background;
    }
}

.card-footer > .button {
    margin: 0.5em 0 0.5em 0.5em;
}

.pagination {
    position: sticky !important;
    bottom: 0 !important;
    background-color: $scheme-background;
    padding: 1em;
    border-top: 1px solid $scheme-border;
    text-align: left;
    z-index: 10;
}

.pagination--invisible {
    visibility: hidden;
}

.smaller-font {
    font-size: 0.9em;
}

.in-mod-list {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

select {
    border-radius: 4px;
}

.non-selectable, .non-selectable *, button, a  {
    user-select: none;
}

.selectable {
    user-select: text;
}

.file-drop {
    position: fixed;
    z-index: 998;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    vertical-align: middle;
}

.panel-heading {
    border-bottom: 1px solid lightgray;
}

.settings-panel {
    padding-top: 1em !important;
    padding-bottom: 1em !important;

    &__content > * {
        line-height: 1.5em !important;
    }
}

.tabs {
    margin-bottom: 0 !important;
}

.no-break {
    word-break: keep-all;
    white-space: nowrap;
}

.input-group {

    &--flex {
        flex: 1;
    }

    display: block;
    white-space: nowrap;

    & label {
        display: block;
        font-size: 0.9em;
        opacity: 0.8;
        margin-bottom: 0.2em;
    }
}

select[disabled] {
    opacity: 0.3 !important;
    color: gray;
}

.ql-editor {
    counter-reset: line;
    padding-left: 0;
    font-size: 1rem;

    * {
        line-height: 1em;
    }
}

.ql-editor p:before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    border-right: 1px solid $scheme-border;
    padding: 0 .5em;
    margin-right: .5em;
    color: $scheme-text;
}

code {
    color: $code-font-color;
}

.margin-right {
    margin-right: 1em;

    &--half-width {
        margin-right: 0.5rem;
    }
}

.margin-left {
    margin-left: 1em;

    &--half-width {
        margin-left: 0.5rem;
    }
}

.margin-bottom {
    margin-bottom: 1em;
}

.margin-top {
    margin-top: 1em;
    &--buttons {
        margin-top: 0.5em;
    }
    &--1rem {
        margin-top: 1rem;
    }
}

.pre {
    white-space: pre-wrap;
    display: block;
    max-width: 100%;
}

.ql-editor > p:not(:last-child) {
    margin-bottom: 0.5em !important;
}

.modal {
    z-index: 200;
}

.card-action-overlay {
    opacity: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    &:hover, &:focus, &:focus-within {
        opacity: 1;
    }
    transition: opacity 0.1s linear;
}

.rounded {
    border-radius: 4px;
}

.border {

    &--top {
        border-top: 6px solid $scheme-background;
    }

    &--groove {
        border-style: groove;
    }

    &--border-box {
        box-sizing: border-box;
    }

    &--warning {
        border-color: $warning;
    }
}

.warning-shadow {
    box-shadow: 0px 0px 4px 2px $warning;
}

*:focus {
    outline-color: yellow !important;
}

.pad {
    &--sides {
        padding: 1em;
    }
    &--left-right {
        padding: 0 1em;
    }
}

.select {
    padding-left: 0.5em;
}

.full-height--minus-em {
    height: calc(100vh - 1em);
}

.no-padding-left {
    padding-left: 0;
}

.inherit-background-colour {
    background-color: $scheme-background;
}

.settings-input-container {
    display: flex;
    gap: 16px;
    height: 40px;
    align-items: center;
}

.max-height-100 {
    max-height: 100%;
}

.overflow-auto {
    overflow: auto;
}

.code-snippet {
    padding: 4px 4px 4px 8px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.15);
}
